<!--
  This file is part of "photo-booth" 
  Copyright (c) 2018 Philipp Trenz

  For more information on the project go to
  <https://github.com/philipptrenz/photo-booth>

  This program is free software: you can redistribute it and/or modify  
  it under the terms of the GNU General Public License as published by  
  the Free Software Foundation, version 3.

  This program is distributed in the hope that it will be useful, but 
  WITHOUT ANY WARRANTY; without even the implied warranty of 
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU 
  General Public License for more details.

  You should have received a copy of the GNU General Public License 
  along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>photo-booth config</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
	<link rel="stylesheet" href="css/style.css">
</head>
<body style="display: none;">

	<nav class="container-fluid">
		<div class="my-navbar row-fluid">
			<a class="my-brand col-sm-4 col-xs-6 hidden-xs" href="#"><b>photo-booth</b></a>
			<a class="my-trigger-button col-sm-4 col-xs-6" href="#" onclick="triggerPhoto()">
				<i class="fa fa-camera" aria-hidden="true" id="trigger-button"></i>
			</a>
			<a class="my-back-button  col-sm-4 col-xs-6" href="index.html" onclick="">
				<i class="fa fa-chevron-left" aria-hidden="true" id="settings-button"></i>
			</a>
		</div>
	</nav>

	<div class="container">
		<div class="table">

			<div class="row">
				<div class="cell">
					<h3>Camera Setup</h3>
				</div>
			</div>
			 
			  <div class="row">
			    <div class="cell">Image width</div>
			    <div class="cell">
			    	<form action="#">
						<p class="range-field">
							<input type="range" min="500" max="2000" step="100" id="maxImageSize"/>
						</p>
					</form>
			    </div>
			  </div>

			  <div class="row">
			    <div class="cell">Keep images on Camera</div>
			    <div class="cell">
				    <div class="switch">
						<label>
							<input type="checkbox" id="keep">
							<span class="lever"></span>
						</label>
					</div>
			    </div>
			  </div>

			<!--
			<div class="row">
				<div class="cell">
					<h3>Customize</h3>
				</div>
			</div>

			<div class="row">
			    <div class="cell">Brand this photo booth</div>
			    <div class="cell">
					<div class="input-field s12">
						<select>
							<option value="2">Image</option>
							<option value="1">Text</option>
							<option value="3">Nothing</option>
						</select>

					</div>

			    </div>
			</div>	
			-->


			<div class="row">
				<div class="cell">
					<h3>Image</h3>
				</div>
			</div>

			<div class="row">
				<div class="cell">Photo series length</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="number" id="photoSeriesLength">
						</label>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="cell">Photo preview duration</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="number" id="photoPreviewDuration">
						</label>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="cell">First photo countdown length</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="number" id="firstPhotoCountdownLength">
						</label>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="cell">Following photos countdown length</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="number" id="followingPhotosCountdownLength">
						</label>
					</div>
				</div>
			</div>


			<div class="row">
				<div class="cell">
					<h3>Slideshow</h3>
				</div>
			</div>

			<div class="row">
				<div class="cell">Enabled</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="checkbox" id="slideshowEnabled">
							<span class="lever"></span>
						</label>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="cell">Activates after seconds</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="number" id="slideshowActivatesAfterSeconds">
						</label>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="cell">Seconds per photo</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="number" id="slideshowSecondsPerPhoto">
						</label>
					</div>
				</div>
			</div>


			<div class="row">
				<div class="cell">
					<h3>Developer</h3>
				</div>
			</div>

			<div class="row">
				<div class="cell">Show Developer Tools</div>
				<div class="cell">
					<div class="switch">
						<label>
							<input type="checkbox" id="showDevTools">
							<span class="lever"></span>
						</label>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="cell">Use GPIO pins</div>
				<div class="cell">
				    <div class="switch">
						<label>
							<input type="checkbox" id="useGPIO">
							<span class="lever"></span>
						</label>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="cell">Open in fullscreen</div>
				<div class="cell">
				    <div class="switch">
						<label>
							<input type="checkbox" id="fullscreen">
							<span class="lever"></span>
						</label>
					</div>
				</div>
			</div>


		</div>
		<div class="buttons">
			<button class="btn waves-effect waves-light grey darken-3" type="submit" onclick="save(null)">Apply</button>
			<button class="btn waves-effect waves-light" type="submit" onclick="save('exit')">Close</button>
			<br />
			<button class="btn waves-effect waves-light grey darken-3" type="submit" onclick="save('shutdown')">Shutdown</button>
			<!--<button class="btn waves-effect waves-light" type="submit" onclick="save('git-pull')">Pull from Repo</button>-->
			<button class="btn waves-effect waves-light grey darken-3" type="submit" onclick="save('reboot')">Reboot</button>
		</div>
	</div>

	<script src="/socket.io/socket.io.js"></script>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/materialize.min.js"></script>

	<script>

		var socket = io();
		var config = null

  		// ------------------------------------------------- //

  		$(document).ready(function() {
  			$('body').fadeIn(800);

			$('select').material_select();
		});

  		socket.emit('get_config', getCookie('password'));

  		// set ui to config values
  		socket.on('get_config', function(configObject){
  			if (configObject == false) {
  				console.log('wrong password');
  			} else if (configObject) {
	  			config = configObject;

	  			console.log(config)

				$('#maxImageSize').val(config.maxImageSize);
				$('#keep').prop('checked', config.gphoto2.keep);

				$('#photoSeriesLength').val(config.photoSeriesLength);
				$('#photoPreviewDuration').val(config.photoPreviewDuration);
				$('#firstPhotoCountdownLength').val(config.firstPhotoCountdownLength);
				$('#followingPhotosCountdownLength').val(config.followingPhotosCountdownLength);

				$('#slideshowEnabled').prop('checked', config.slideshow.enabled);
				$('#slideshowActivatesAfterSeconds').val(config.slideshow.activatesAfterSeconds);
				$('#slideshowSecondsPerPhoto').val(config.slideshow.secondsPerPhoto);

				$('#showDevTools').prop('checked', config.init.showDevTools);
				$('#useGPIO').prop('checked', config.init.useGPIO);
				$('#fullscreen').prop('checked', config.init.fullscreen);
			} else {
				console.log('Server returned undefined config file');
			}
		});

  		function save(option) {
  			if (!option && config) {
				config.maxImageSize = $('#maxImageSize').val();
				config.gphoto2.keep = $('#keep').prop('checked');

				config.photoSeriesLength = $('#photoSeriesLength').val();
				config.photoPreviewDuration = $('#photoPreviewDuration').val();
				config.firstPhotoCountdownLength = $('#firstPhotoCountdownLength').val();
				config.followingPhotosCountdownLength = $('#followingPhotosCountdownLength').val();

				config.slideshow.enabled = $('#slideshowEnabled').prop('checked');
				config.slideshow.activatesAfterSeconds = $('#slideshowActivatesAfterSeconds').val();
				config.slideshow.secondsPerPhoto = $('#slideshowSecondsPerPhoto').val();

				config.init.showDevTools = $('#showDevTools').prop('checked');
				config.init.useGPIO = $('#useGPIO').prop('checked');
				config.init.fullscreen = $('#fullscreen').prop('checked');

				socket.emit('set_config', {password: getCookie('password'), config: config});
			} else if (option) {
				// option can be 'restart', 'exit'
				socket.emit('set_config', {password: getCookie('password'), option: option});
			}
  		}

  		function triggerPhoto() {
			// request edited image from server
			socket.emit('trigger_photo', getCookie('password'));
		}

  		// ------------------------------------------------- //


		function getCookie(name) {
			try {
				var value = "; " + document.cookie;
				var parts = value.split("; " + name + "=");
				if (parts.length == 2) return parts.pop().split(";").shift();
			} catch(err) {
				return false;
			}
		}
	
	</script>
</body>
</html>